<template>
  <div class="tree-grid-container">
    <!-- 左边树形 -->
    <div class="tree-container">
      <div class="tree-title">
        <div class="tree-title-button" @click="refresh">{{ treeTitle }}</div>
      </div>
      <div class="tree-datas">
        <el-tree
          ref="tree"
          :data="treeGridData"
          node-key="id"
          :props="treeDefaultProps"
          icon-class="goods"
          :default-expand-all="defaultExpandAll"
          :render-content="renderContent"
          @node-click="handleTreeNodeClick"
        ></el-tree>
      </div>
    </div>
    <!-- 右边表格 -->
    <div class="grid-container">
      <!-- 工具栏 -->
      <slot name="toolBar" />

      <!-- 数据表格 -->
      <slot name="tableGrid" />
    </div>
  </div>
</template>
<script>
export default {
  name: "TreeGridPage",
  props: {
    datas: {
      type: Array,
      default: () => [],
    },
    props: {
      type: Object,
      default: () => {},
    },
    title: {
      type: String,
      default: () => "",
    },
    expandAll: {
      type: Boolean,
      default: () => true,
    },
  },
  computed: {
    treeGridData: {
      get() {
        return this.datas;
      },
    },
    treeDefaultProps: {
      get() {
        return this.props;
      },
    },
    treeTitle: {
      get() {
        return this.title;
      },
    },
    defaultExpandAll: {
      get() {
        return this.expandAll;
      },
    },
  },
  methods: {
    // 刷新
    refresh() {
      this.$emit("refresh");
    },

    // 获取属性组件对象
    getTreeRef() {
      return this.$refs.tree;
    },

    // 点击树形目录
    handleTreeNodeClick(e) {
      this.$emit("treeClick", e);
    },

    // 设置默认选择的节点
    setDefaultSelectNode(currentNodeKey) {
      if (!currentNodeKey) return;
      this.$nextTick(() => {
        const treeObj = this.getTreeRef();
        const currentNode = treeObj.getNode(currentNodeKey);
        currentNode.isCurrent = true;

        // 取消其它节点的选择
        this.treeGridData.forEach((item) => {
          const nodeKey = item.id;
          if (nodeKey) {
            if (nodeKey !== currentNodeKey) {
              const currentNode = treeObj.getNode(nodeKey);
              if (currentNode.isCurrent) {
                currentNode.isCurrent = false;
              }
            }
          }
        });
      });
    },

    clearSelectNodde(currentNodeKey) {
      if (!currentNodeKey) return;

      this.$nextTick(() => {
        const treeObj = this.getTreeRef();
        const currentNode = treeObj.getNode(currentNodeKey);
        currentNode.isCurrent = false;
      });
    },

    renderContent(h, { node, data }) {
      const { childNodes } = node;
      if (childNodes && childNodes.length > 0) {
        return (
          <span>
            <svg-icon icon-class="tree-folder" size="1.5"></svg-icon>
            <span style="margin-left: 5px;">{node.label}</span>
          </span>
        );
      } else {
        return (
          <span>
            <svg-icon icon-class="tree-file" size="1.5"></svg-icon>
            <span style="margin-left: 5px;">{node.label}</span>
          </span>
        );
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.tree-grid-container {
  display: flex;
  justify-content: flex-start;
  overflow: hidden;

  .tree-container {
    border-right: 8px solid #f2f6fc;
    height: calc(100vh - 200px);
    overflow: scroll;
    width: 10%;

    .tree-title {
      width: auto;
      height: 50px;
      margin: 15px 15px;
      overflow: hidden;

      .tree-title-button {
        width: auto;
        height: 50px;
        font-size: 23px;
        color: #2b7dbc;
        cursor: pointer;
        text-align: center;
        line-height: 50px;
      }

      .tree-title-button:hover {
        background-color: #35baf6;
        color: white;
        border-radius: 10px;
      }
    }
  }

  .grid-container {
    width: 90%;
  }

  .el-tree {
    ::v-deep .el-tree-node.is-current > .el-tree-node__content {
      background-color: #ffefbb !important;
    }

    ::v-deep .el-tree-node__content {
      width: 100% !important;
      height: 50px !important;
      font-size: 21px !important;
    }
  }
}
</style>
